/**
* border 1px 解决方案
**/
@mixin nl-border($color, $UDLR: 'bottom', $px: 1, $radius: 0) {
  position: relative;
  &::after {
    content: ' ';
    pointer-events: none;
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid transparent;
    border-radius: inherit;
    border-color: $color;

    @if $UDLR == 'bottom' {
      border-bottom-width: ptr($px);
    } @else if $UDLR == 'top' {
      border-top-width: ptr($px);
    } @else if $UDLR == 'left' {
      border-left-width: ptr($px);
    } @else if $UDLR == 'right' {
      border-right-width: ptr($px);
    } @else {
      border-width: ptr($px);
    }
    @if $radius != 0 {
      border-radius: ptr($radius);
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (-o-min-device-pixel-ratio: 150/100),
      only screen and (min-device-pixel-ratio: 1.5) {
      transform: scale(0.5);
      @if $radius != 0 {
        border-radius: ptr($radius * 2);
      }
    }
    // Retina 屏像素
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 200/100),
      only screen and (min-device-pixel-ratio: 2) {
      transform: scale(0.5);
      @if $radius != 0 {
        border-radius: ptr($radius * 2);
      }
    }

    // 3倍 屏像素
    @media only screen and (-webkit-min-device-pixel-ratio: 2.5),
      only screen and (min--moz-device-pixel-ratio: 2.5),
      only screen and (-o-min-device-pixel-ratio: 250/100),
      only screen and (min-device-pixel-ratio: 2.5) {
      transform: scale(0.5);
    }
  }
}
